<!--
  画布组件 - Canvas.vue
  这是整个应用的核心组件，提供可视化设计界面
  主要功能：拖拽添加组件、选择编辑组件、调整组件大小和位置、右键菜单操作
-->
<template>
  <div class="canvas-wrapper">
    <!-- 画布容器：处理拖放事件和画布交互 -->
    <div 
      class="canvas-container"
      ref="canvasRef"
      @drop="handleDrop"              
      @dragover="handleDragOver"      
      @click="handleCanvasClick"      
    >
      <!-- 画布背景：实际的设计区域，支持缩放和背景设置 -->
      <div 
        class="canvas-background"
        :style="{
          width: canvasConfig.width * scale + 'px',           // 画布宽度（考虑缩放）
          height: canvasConfig.height * scale + 'px',         // 画布高度（考虑缩放）
          backgroundColor: canvasConfig.backgroundColor,      // 背景颜色
          backgroundImage: canvasConfig.backgroundImage ? `url(${canvasConfig.backgroundImage})` : 'none',  // 背景图片
          backgroundSize: 'cover',                           // 背景图片覆盖方式
          backgroundPosition: 'center',                      // 背景图片位置
          transform: 'translate(-50%, -50%)',               // 居中显示
          left: '50%',                                       // 水平居中
          top: '50%',                                        // 垂直居中
          position: 'absolute'                               // 绝对定位
        }"
      >
        <!-- 网格线：辅助对齐的参考线 -->
        <div class="grid-lines" v-if="showGrid">
          <!-- 垂直网格线 -->
          <div 
            v-for="i in Math.ceil(canvasConfig.width / 20)"
            :key="'v' + i"
            class="grid-line vertical"
            :style="{ left: (i * 20 * scale) + 'px' }"
          ></div>
          <!-- 水平网格线 -->
          <div 
            v-for="i in Math.ceil(canvasConfig.height / 20)"
            :key="'h' + i"
            class="grid-line horizontal"
            :style="{ top: (i * 20 * scale) + 'px' }"
          ></div>
        </div>

        <!-- 渲染所有组件：遍历组件列表并在画布上显示 -->
        <div
          v-for="component in components"
          :key="component.id"
          class="canvas-component"
          :class="{ active: component.id === activeComponentId }"  
          :style="{
            position: 'absolute',                                    // 绝对定位
            left: component.style.left * scale + 'px',             // X坐标（考虑缩放）
            top: component.style.top * scale + 'px',               // Y坐标（考虑缩放）
            width: component.style.width * scale + 'px',           // 宽度（考虑缩放）
            height: component.style.height * scale + 'px',         // 高度（考虑缩放）
            zIndex: component.style.zIndex,                        // 层级
            opacity: component.style.opacity,                      // 透明度
            transform: `rotate(${component.style.rotate}deg) scale(${scale})`,  // 旋转和缩放变换
            transformOrigin: 'top left',                           // 变换原点
            borderRadius: component.style.borderRadius + 'px',     // 圆角
            backgroundColor: component.style.backgroundColor,       // 背景颜色
            border: component.style.border                         // 边框
          }"
          @click.stop="selectComponent(component.id)"             
          @mousedown="startDrag($event, component.id)"            
        >
          <!-- 组件内容：实际的组件渲染区域 -->
          <div class="component-content" :style="{ transform: `scale(${1/scale})`, transformOrigin: 'top left' }">
            <ComponentRenderer :component="component" />
          </div>

          <!-- 选中状态的控制点：用于调整组件大小 -->
          <div v-if="component.id === activeComponentId" class="resize-handles">
            <!-- 八个方向的缩放控制点 -->
            <div class="resize-handle nw" @mousedown.stop="startResize($event, 'nw')"></div>  <!-- 西北角 -->
            <div class="resize-handle ne" @mousedown.stop="startResize($event, 'ne')"></div>  <!-- 东北角 -->
            <div class="resize-handle sw" @mousedown.stop="startResize($event, 'sw')"></div>  <!-- 西南角 -->
            <div class="resize-handle se" @mousedown.stop="startResize($event, 'se')"></div>  <!-- 东南角 -->
            <div class="resize-handle n" @mousedown.stop="startResize($event, 'n')"></div>    <!-- 北边 -->
            <div class="resize-handle s" @mousedown.stop="startResize($event, 's')"></div>    <!-- 南边 -->
            <div class="resize-handle w" @mousedown.stop="startResize($event, 'w')"></div>    <!-- 西边 -->
            <div class="resize-handle e" @mousedown.stop="startResize($event, 'e')"></div>    <!-- 东边 -->
          </div>
        </div>
      </div>
    </div>

    <!-- 右键菜单：提供组件操作选项 -->
    <div 
      v-if="contextMenu.visible"
      class="context-menu"
      :style="{
        left: contextMenu.x + 'px',    // 菜单X坐标
        top: contextMenu.y + 'px'      // 菜单Y坐标
      }"
      @click.stop
    >
      <div class="menu-item" @click="copyComponent">复制</div>      <!-- 复制组件 -->
      <div class="menu-item" @click="deleteComponent">删除</div>    <!-- 删除组件 -->
      <div class="menu-item" @click="bringToFront">置于顶层</div>   <!-- 置于顶层 -->
      <div class="menu-item" @click="sendToBack">置于底层</div>     <!-- 置于底层 -->
    </div>
  </div>
</template>

<script setup lang="ts">
// Vue 3 组合式 API 相关导入
import { ref, computed, onMounted, onUnmounted } from 'vue'
// 画布状态管理
import { useCanvasStore } from '@/stores/canvas'
// 组件模板配置
import { getTemplateByType } from '@/config/components'
// 组件渲染器
import ComponentRenderer from './ComponentRenderer.vue'
// TypeScript 类型定义
import type { Component } from '@/types'

// 获取画布状态管理实例
const canvasStore = useCanvasStore()
// 画布DOM元素引用
const canvasRef = ref<HTMLElement>()

// 计算属性：从状态管理中获取响应式数据
const components = computed(() => canvasStore.components)           // 画布上的所有组件
const activeComponentId = computed(() => canvasStore.activeComponentId)  // 当前选中的组件ID
const canvasConfig = computed(() => canvasStore.canvasConfig)       // 画布配置（尺寸、背景等）
const scale = computed(() => canvasStore.scale)                     // 画布缩放比例

// 网格显示状态（用于辅助对齐）
const showGrid = ref(true)

// 右键菜单状态管理
const contextMenu = ref({
  visible: false,    // 是否显示菜单
  x: 0,             // 菜单X坐标
  y: 0,             // 菜单Y坐标
  componentId: ''   // 右键点击的组件ID
})

// 拖拽状态管理
const dragState = ref({
  isDragging: false,  // 是否正在拖拽
  startX: 0,         // 拖拽开始时的鼠标X坐标
  startY: 0,         // 拖拽开始时的鼠标Y坐标
  startLeft: 0,      // 拖拽开始时组件的left值
  startTop: 0,       // 拖拽开始时组件的top值
  componentId: ''    // 正在拖拽的组件ID
})

// 缩放状态管理
const resizeState = ref({
  isResizing: false,   // 是否正在缩放
  direction: '',       // 缩放方向（nw, ne, sw, se, n, s, w, e）
  startX: 0,          // 缩放开始时的鼠标X坐标
  startY: 0,          // 缩放开始时的鼠标Y坐标
  startWidth: 0,      // 缩放开始时组件的宽度
  startHeight: 0,     // 缩放开始时组件的高度
  startLeft: 0,       // 缩放开始时组件的left值
  startTop: 0,        // 缩放开始时组件的top值
  componentId: ''     // 正在缩放的组件ID
})

// 处理拖放事件：允许组件从左侧面板拖拽到画布
const handleDragOver = (event: DragEvent) => {
  event.preventDefault()  // 阻止默认行为，允许拖放
  event.dataTransfer!.dropEffect = 'copy'  // 设置拖放效果为复制
}

// 处理组件拖放到画布
const handleDrop = (event: DragEvent) => {
  event.preventDefault()  // 阻止默认行为
  
  // 获取拖拽传递的数据
  const data = event.dataTransfer?.getData('application/json')
  if (!data) return
  
  try {
    // 解析拖拽数据
    const dropData = JSON.parse(data)
    if (dropData.type === 'component') {
      // 获取画布容器的位置信息
      const rect = canvasRef.value!.getBoundingClientRect()
      // 获取画布背景的位置信息
      const canvasRect = canvasRef.value!.querySelector('.canvas-background')!.getBoundingClientRect()
      
      // 计算组件在画布中的位置（考虑缩放比例）
      const x = (event.clientX - canvasRect.left) / scale.value
      const y = (event.clientY - canvasRect.top) / scale.value
      
      // 创建新组件实例
      const component = {
        id: `comp_${Date.now()}`,  // 生成唯一ID
        type: dropData.template.type,  // 组件类型
        name: dropData.template.name,  // 组件名称
        style: {
          ...dropData.template.defaultStyle,
          // 确保组件不会超出画布边界，位置为鼠标放置位置（居中对齐）
          left: Math.max(0, x - dropData.template.defaultStyle.width / 2),
          top: Math.max(0, y - dropData.template.defaultStyle.height / 2)
        },
        config: { ...dropData.template.defaultConfig }  // 组件配置
      }
      
      // 添加组件到画布
      canvasStore.addComponent(component)
    }
  } catch (error) {
    console.error('Drop error:', error)
  }
}

// 选择组件：设置当前激活的组件
const selectComponent = (id: string) => {
  canvasStore.setActiveComponent(id)  // 设置激活组件
}

// 点击画布空白区域：取消组件选择
const handleCanvasClick = (event: MouseEvent) => {
  // 检查点击的是画布容器或画布背景
  if (event.target === event.currentTarget || 
      (event.target as HTMLElement).classList.contains('canvas-background')) {
    canvasStore.setActiveComponent(null)  // 取消激活组件
  }
}

// 开始拖拽组件：记录拖拽初始状态
const startDrag = (event: MouseEvent, componentId: string) => {
  if (event.button !== 0) return // 只处理鼠标左键点击
  
  // 查找要拖拽的组件
  const component = components.value.find(c => c.id === componentId)
  if (!component) return
  
  // 记录拖拽初始状态
  dragState.value = {
    isDragging: true,                    // 标记正在拖拽
    startX: event.clientX,              // 鼠标起始X坐标
    startY: event.clientY,              // 鼠标起始Y坐标
    startLeft: component.style.left,    // 组件起始left值
    startTop: component.style.top,      // 组件起始top值
    componentId                         // 拖拽的组件ID
  }
  
  // 添加全局鼠标事件监听
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDrag)
}

// 处理拖拽移动：实时更新组件位置
const handleDrag = (event: MouseEvent) => {
  if (!dragState.value.isDragging) return  // 如果不在拖拽状态，直接返回
  
  // 计算鼠标移动的距离（考虑缩放比例）
  const deltaX = (event.clientX - dragState.value.startX) / scale.value
  const deltaY = (event.clientY - dragState.value.startY) / scale.value
  
  // 计算新的位置（确保不超出画布边界）
  const newLeft = Math.max(0, dragState.value.startLeft + deltaX)
  const newTop = Math.max(0, dragState.value.startTop + deltaY)
  
  // 更新组件样式
  canvasStore.updateComponent(dragState.value.componentId, {
    style: {
      ...components.value.find(c => c.id === dragState.value.componentId)!.style,
      left: newLeft,
      top: newTop
    }
  })
}

// 停止拖拽：清理拖拽状态和事件监听
const stopDrag = () => {
  dragState.value.isDragging = false  // 标记拖拽结束
  // 移除全局事件监听
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 开始缩放组件：记录缩放初始状态
const startResize = (event: MouseEvent, direction: string) => {
  // 获取当前激活的组件
  const component = components.value.find(c => c.id === activeComponentId.value)
  if (!component) return
  
  // 记录缩放初始状态
  resizeState.value = {
    isResizing: true,                     // 标记正在缩放
    direction,                           // 缩放方向（nw, ne, sw, se, n, s, w, e）
    startX: event.clientX,              // 鼠标起始X坐标
    startY: event.clientY,              // 鼠标起始Y坐标
    startWidth: component.style.width,   // 组件起始宽度
    startHeight: component.style.height, // 组件起始高度
    startLeft: component.style.left,     // 组件起始left值
    startTop: component.style.top,       // 组件起始top值
    componentId: component.id            // 缩放的组件ID
  }
  
  // 添加全局鼠标事件监听
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
}

// 处理缩放移动：实时更新组件尺寸和位置
const handleResize = (event: MouseEvent) => {
  if (!resizeState.value.isResizing) return  // 如果不在缩放状态，直接返回
  
  // 计算鼠标移动的距离（考虑缩放比例）
  const deltaX = (event.clientX - resizeState.value.startX) / scale.value
  const deltaY = (event.clientY - resizeState.value.startY) / scale.value
  
  // 查找正在缩放的组件
  const component = components.value.find(c => c.id === resizeState.value.componentId)
  if (!component) return
  
  // 初始化新的尺寸和位置
  let newWidth = resizeState.value.startWidth
  let newHeight = resizeState.value.startHeight
  let newLeft = resizeState.value.startLeft
  let newTop = resizeState.value.startTop
  
  const direction = resizeState.value.direction
  
  // 根据缩放方向计算新的尺寸和位置
  if (direction.includes('e')) newWidth = Math.max(20, resizeState.value.startWidth + deltaX)  // 向东（右）缩放
  if (direction.includes('w')) {  // 向西（左）缩放
    newWidth = Math.max(20, resizeState.value.startWidth - deltaX)
    newLeft = resizeState.value.startLeft + deltaX  // 左边缩放时需要调整位置
  }
  if (direction.includes('s')) newHeight = Math.max(20, resizeState.value.startHeight + deltaY)  // 向南（下）缩放
  if (direction.includes('n')) {  // 向北（上）缩放
    newHeight = Math.max(20, resizeState.value.startHeight - deltaY)
    newTop = resizeState.value.startTop + deltaY  // 上边缩放时需要调整位置
  }
  
  // 更新组件样式（确保不超出画布边界）
  canvasStore.updateComponent(resizeState.value.componentId, {
    style: {
      ...component.style,
      width: newWidth,
      height: newHeight,
      left: Math.max(0, newLeft),  // 确保left不小于0
      top: Math.max(0, newTop)     // 确保top不小于0
    }
  })
}

// 停止缩放：清理缩放状态和事件监听
const stopResize = () => {
  resizeState.value.isResizing = false  // 标记缩放结束
  // 移除全局事件监听
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
}

// 右键菜单操作函数

// 复制组件：复制选中的组件
const copyComponent = () => {
  if (contextMenu.value.componentId) {
    canvasStore.copyComponent(contextMenu.value.componentId)  // 调用状态管理的复制方法
  }
  contextMenu.value.visible = false  // 隐藏右键菜单
}

// 删除组件：从画布中移除选中的组件
const deleteComponent = () => {
  if (contextMenu.value.componentId) {
    canvasStore.removeComponent(contextMenu.value.componentId)  // 调用状态管理的删除方法
  }
  contextMenu.value.visible = false  // 隐藏右键菜单
}

// 置于顶层：将组件的层级设置为最高
const bringToFront = () => {
  if (contextMenu.value.componentId) {
    // 找到当前所有组件中最大的zIndex值
    const maxZ = Math.max(...components.value.map(c => c.style.zIndex))
    // 将选中组件的zIndex设置为最大值+1
    canvasStore.updateComponent(contextMenu.value.componentId, {
      style: {
        ...components.value.find(c => c.id === contextMenu.value.componentId)!.style,
        zIndex: maxZ + 1  // 设置为最高层级
      }
    })
  }
  contextMenu.value.visible = false  // 隐藏右键菜单
}

// 置于底层：将组件的层级设置为最低
const sendToBack = () => {
  if (contextMenu.value.componentId) {
    // 找到当前所有组件中最小的zIndex值
    const minZ = Math.min(...components.value.map(c => c.style.zIndex))
    // 将选中组件的zIndex设置为最小值-1（但不小于1）
    canvasStore.updateComponent(contextMenu.value.componentId, {
      style: {
        ...components.value.find(c => c.id === contextMenu.value.componentId)!.style,
        zIndex: Math.max(1, minZ - 1)  // 设置为最低层级，但不小于1
      }
    })
  }
  contextMenu.value.visible = false  // 隐藏右键菜单
}

// 处理右键菜单：显示组件操作菜单
const handleContextMenu = (event: MouseEvent) => {
  event.preventDefault()  // 阻止浏览器默认右键菜单
  const target = event.target as HTMLElement
  // 查找最近的组件元素
  const componentElement = target.closest('.canvas-component')
  
  if (componentElement) {
    // 通过DOM元素查找对应的组件ID（这里的逻辑可能需要根据实际DOM结构调整）
    const componentId = components.value.find(c => 
      componentElement.querySelector(`[data-component-id="${c.id}"]`) ||
      componentElement === document.querySelector(`[data-component-id="${c.id}"]`)?.parentElement
    )?.id
    
    if (componentId) {
      // 显示右键菜单并设置位置
      contextMenu.value = {
        visible: true,
        x: event.clientX,  // 鼠标X坐标
        y: event.clientY,  // 鼠标Y坐标
        componentId        // 右键点击的组件ID
      }
    }
  }
}

// 隐藏右键菜单：点击其他地方时隐藏菜单
const hideContextMenu = () => {
  contextMenu.value.visible = false
}

// 组件生命周期钩子

// 组件挂载后：注册全局事件监听器
onMounted(() => {
  // 监听右键菜单事件
  document.addEventListener('contextmenu', handleContextMenu)
  // 监听点击事件（用于隐藏右键菜单）
  document.addEventListener('click', hideContextMenu)
})

// 组件卸载前：清理所有事件监听器，防止内存泄漏
onUnmounted(() => {
  // 移除右键菜单相关事件监听
  document.removeEventListener('contextmenu', handleContextMenu)
  document.removeEventListener('click', hideContextMenu)
  // 移除拖拽相关事件监听（防止组件销毁时仍有未清理的监听器）
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
  // 移除缩放相关事件监听
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<!--
  Canvas组件样式定义
  包含画布容器、网格线、组件样式、缩放控制点、右键菜单等样式
-->
<style scoped>
/* 画布包装器：最外层容器 */
.canvas-wrapper {
  width: 100%;           /* 占满父容器宽度 */
  height: 100%;          /* 占满父容器高度 */
  position: relative;    /* 相对定位，为子元素提供定位上下文 */
  overflow: auto;        /* 内容溢出时显示滚动条 */
}

/* 画布容器：可滚动的设计区域，带有网格背景 */
.canvas-container {
  width: 100%;           /* 占满包装器宽度 */
  height: 100%;          /* 占满包装器高度 */
  position: relative;    /* 相对定位 */
  background: #1e1e1e;   /* 深色背景 */
  /* 网格背景图案：使用线性渐变创建网格效果 */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),      /* 垂直网格线 */
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); /* 水平网格线 */
  background-size: 20px 20px;  /* 网格大小：20x20像素 */
}

/* 画布背景：实际的设计画布 */
.canvas-background {
  position: relative;                    /* 相对定位 */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 深色阴影效果 */
}

/* 网格线容器：辅助对齐的参考线 */
.grid-lines {
  position: absolute;    /* 绝对定位 */
  top: 0;               /* 顶部对齐 */
  left: 0;              /* 左侧对齐 */
  width: 100%;          /* 占满画布宽度 */
  height: 100%;         /* 占满画布高度 */
  pointer-events: none; /* 不响应鼠标事件 */
}

/* 网格线基础样式 */
.grid-line {
  position: absolute;                    /* 绝对定位 */
  background: rgba(255, 255, 255, 0.1);  /* 半透明白色（适配深色主题） */
}

/* 垂直网格线 */
.grid-line.vertical {
  width: 1px;           /* 1像素宽度 */
  height: 100%;         /* 占满容器高度 */
}

/* 水平网格线 */
.grid-line.horizontal {
  width: 100%;          /* 占满容器宽度 */
  height: 1px;          /* 1像素高度 */
}

/* 画布组件基础样式 */
.canvas-component {
  cursor: move;                          /* 移动光标 */
  border: 2px solid transparent;        /* 透明边框（为选中状态预留空间） */
  transition: border-color 0.2s ease;   /* 边框颜色过渡动画 */
}

/* 组件悬停效果 */
.canvas-component:hover {
  border-color: rgba(64, 158, 255, 0.5); /* 半透明蓝色边框高亮 */
}

/* 组件激活状态 */
.canvas-component.active {
  border-color: var(--primary-color);    /* 主题色边框 */
}

/* 组件内容容器 */
.component-content {
  width: 100%;           /* 占满组件宽度 */
  height: 100%;          /* 占满组件高度 */
  pointer-events: none;  /* 不响应鼠标事件（避免干扰拖拽） */
}

/* 缩放控制点容器 */
.resize-handles {
  position: absolute;    /* 绝对定位 */
  top: -4px;            /* 向上扩展4像素 */
  left: -4px;           /* 向左扩展4像素 */
  right: -4px;          /* 向右扩展4像素 */
  bottom: -4px;         /* 向下扩展4像素 */
  pointer-events: none; /* 容器本身不响应鼠标事件 */
}

/* 缩放控制点基础样式 */
.resize-handle {
  position: absolute;              /* 绝对定位 */
  width: 8px;                     /* 8像素宽度 */
  height: 8px;                    /* 8像素高度 */
  background: var(--primary-color); /* 主题色背景 */
  border: 1px solid #fff;         /* 白色边框 */
  border-radius: 50%;             /* 圆形控制点 */
  pointer-events: all;            /* 响应鼠标事件 */
}

/* 西北角缩放控制点 */
.resize-handle.nw {
  top: 0;               /* 顶部对齐 */
  left: 0;              /* 左侧对齐 */
  cursor: nw-resize;    /* 西北方向缩放光标 */
}

/* 东北角缩放控制点 */
.resize-handle.ne {
  top: 0;               /* 顶部对齐 */
  right: 0;             /* 右侧对齐 */
  cursor: ne-resize;    /* 东北方向缩放光标 */
}

/* 西南角缩放控制点 */
.resize-handle.sw {
  bottom: 0;            /* 底部对齐 */
  left: 0;              /* 左侧对齐 */
  cursor: sw-resize;    /* 西南方向缩放光标 */
}

/* 东南角缩放控制点 */
.resize-handle.se {
  bottom: 0;            /* 底部对齐 */
  right: 0;             /* 右侧对齐 */
  cursor: se-resize;    /* 东南方向缩放光标 */
}

/* 北边缩放控制点 */
.resize-handle.n {
  top: 0;                           /* 顶部对齐 */
  left: 50%;                        /* 水平居中 */
  transform: translateX(-50%);      /* 精确居中 */
  cursor: n-resize;                 /* 北方向缩放光标 */
}

/* 南边缩放控制点 */
.resize-handle.s {
  bottom: 0;                        /* 底部对齐 */
  left: 50%;                        /* 水平居中 */
  transform: translateX(-50%);      /* 精确居中 */
  cursor: s-resize;                 /* 南方向缩放光标 */
}

/* 西边缩放控制点 */
.resize-handle.w {
  top: 50%;                         /* 垂直居中 */
  left: 0;                          /* 左侧对齐 */
  transform: translateY(-50%);      /* 精确居中 */
  cursor: w-resize;                 /* 西方向缩放光标 */
}

/* 东边缩放控制点 */
.resize-handle.e {
  top: 50%;                         /* 垂直居中 */
  right: 0;                         /* 右侧对齐 */
  transform: translateY(-50%);      /* 精确居中 */
  cursor: e-resize;                 /* 东方向缩放光标 */
}

/* 右键菜单容器 */
.context-menu {
  position: fixed;                          /* 固定定位（相对于视口） */
  background: var(--bg-secondary);         /* 次要背景色 */
  border: 1px solid var(--border-color);   /* 边框颜色 */
  border-radius: 6px;                      /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  z-index: 9999;                           /* 最高层级 */
  min-width: 120px;                        /* 最小宽度 */
}

/* 菜单项基础样式 */
.menu-item {
  padding: 8px 16px;                       /* 内边距 */
  cursor: pointer;                         /* 指针光标 */
  font-size: 14px;                         /* 字体大小 */
  color: var(--text-color);                /* 文字颜色 */
  transition: background-color 0.2s ease;  /* 背景色过渡动画 */
}

/* 菜单项悬停效果 */
.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);     /* 半透明白色背景 */
}

/* 第一个菜单项：顶部圆角 */
.menu-item:first-child {
  border-radius: 6px 6px 0 0;
}

/* 最后一个菜单项：底部圆角 */
.menu-item:last-child {
  border-radius: 0 0 6px 6px;
}
</style>